<template>
	<view class="person_address">
		<view class="list" v-for="(item,index) in list" :key="index">
			<image class="image" v-if="item.status==2" src="@/static/images/address_icon.png" mode=""></image>
			<view class="img" v-else>{{item.username[0]}}</view>
			<view class="info" @click="selectBtn(index)">
				<view class="info_name">
					<text class="name">{{item.username}} {{item.mobile}}</text>
					<text class="tip" v-if="item.status==2">默认</text>
				</view>
				<view class="info_text">
					{{item.area}}{{item.address}}
				</view>
			</view>
			<view class="icon" @click="rightBtn(item,index)">
				<u-icon v-if="edit_type" name="edit-pen" color="#999" size="35"></u-icon>
				<u-icon v-else name="trash" color="#999" size="35"></u-icon>
			</view>
		</view>
		<!-- 底部 -->
		<view :style="[paddingStyle]"></view>
		<view class="add_ress_btn" :style="[botStyle]">
			<view class="left" @click="manageBtn">{{edit_type?'管理':'完成'}}</view>
			<view class="btn" @click="affirmBtn">+ 添加收货地址</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:2,
				// 
				bottomHeight:0,
				// 编辑/删除
				edit_type:true,
				// 
				list:[]
			};
		},
		computed:{
			paddingStyle(){
				var height = this.bottomHeight?(this.bottomHeight*2+100+'rpx'):'120rpx'
				return {
					paddingBottom:height
				}
			},
			botStyle(){
				return {
					paddingBottom:this.bottomHeight?this.bottomHeight+'px':'20rpx'
				}
			},
		},
		onLoad(opt) {
			if(opt.type){
				this.type=opt.type
			}
			uni.getSystemInfo({
				success: (res) => {
					this.bottomHeight = res.safeAreaInsets.bottom
				}
			});
		},
		onShow() {
			this.addressList()
		},
		methods:{
			addressList(){
				var that = this
				that.$tips.showLoading('加载中')
				that.$httpApi.addressIndex().then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.list=res.data
					}
				})
			},
			// 选择地址返回订单页
			selectBtn(index){
				var that = this
				if(that.type==1){
					let pages = getCurrentPages();  //获取所有页面栈实例列表
					let nowPage = pages[ pages.length - 1];  //当前页页面实例
					let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
					prevPage.$vm.address=that.list[index]
					uni.navigateBack();
				}else{
					return
				}
			},
			// 
			rightBtn(info,index){
				var that = this
				if(this.edit_type){
					// 编辑
					uni.navigateTo({
						url:'/pages/person/person_address_add?info='+JSON.stringify(info)
					})
				}else{
					// 删除
					that.$tips.showLoading('删除中')
					var params = {
						id:info.id
					}
					that.$httpApi.addressDel(params).then((res)=>{
						that.$tips.hideLoading()
						if(res.code==1){
							that.list.splice(index,1)
							that.$tips.showToast('删除成功')
						}
					})
				}
			},
			// 管理
			manageBtn(){
				this.edit_type=!this.edit_type
			},
			// 添加地址
			affirmBtn(){
				uni.navigateTo({
					url:'/pages/person/person_address_add'
				})
			},
		}
	}
</script>

<style lang="less">
	.person_address{
		width: 100%;
		padding-top: 24rpx;
		.list{
			margin-bottom: 1px;
			width: 100%;
			padding: 24rpx 32rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.image{
				display: block;
				width: 68rpx;
				height: 68rpx;
			}
			.img{
				width: 68rpx;
				height: 68rpx;
				line-height: 68rpx;
				font-size: 28rpx;
				text-align: center;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #26C281;
				background: rgba(38,194,129,0.2);
				border-radius: 50%;
			}
			.info{
				width: calc(100% - 166rpx);
				.info_name{
					width: 100%;
					display: flex;
					align-items: center;
					.name{
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
						padding-right: 20rpx;
					}
					.tip{
						padding: 0 10rpx;
						display: block;
						line-height: 40rpx;
						background: rgba(38,194,129,0.06);
						border-radius: 4px;
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #26C281;
					}
				}
				.info_text{
					padding-top: 15rpx;
					font-size: 28rpx;
					line-height: 45rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
			.icon{
				width: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.add_ress_btn{
		position: fixed;
		bottom: 0;
		z-index: 100;
		width: 100%;
		background: #fff;
		padding-top: 20rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			width: 228rpx;
			height: 80rpx;
			line-height: 76rpx;
			text-align: center;
			color: #26C281;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			border-radius: 40rpx;
			border: 1rpx solid #26C281;
		}
		.btn{
			width: 416rpx;
			height: 80rpx;
			line-height: 76rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			background: #26C281;
			border: 1rpx solid #26C281;
			border-radius: 44rpx;
		}
	}
</style>
